<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/MUI/css/mui.picker.min.css">
<script src="${pageContext.request.contextPath}/resources/MUI/js/mui.picker.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css"media="all" />
</head>
<style>
.mui-ellipsis {
	width: 65%;
}

.btn {
	line-height: 40px;
}
a{
    color: #007aff;
    font-size:17px;
 }
h4{
	display: inline-block;
	color:#616161;
	font-size:17px;
	font-weight: 600;
    line-height: 2;
}
.caseBoxRecord{
	padding:0px 10px 10px 10px;
	color:#3e3e3e;
	font-size: 14px
}
.caseBoxRecord ul{
	box-shadow: 1px 2px 5px #bdbdbd;
	border-radius: 2%;
	padding:12px;
	background: white;
}
.isRefund{
	height: 25px;
    border-radius: 15%;
    line-height: 12px;
}
</style>

<body>
	<form class="mui-input-group mui-collapse-content">
		<div class="mui-input-row">
			<label>公司:</label> <select class="comp" name="compId">
				<c:forEach items="${compList}" var="list">
					<option value="${list.compId }">${list.compName}</option>
				</c:forEach>
			</select>
		</div>
		<div class="mui-input-row">
			<label>开始时间:</label> <input id='begin' data-options='{}' class="btn"
				placeholder="开始时间">
		</div>
		<div class="mui-input-row">
			<label>结束时间:</label> <input id='end' data-options='{}' class="btn"
				placeholder="结束时间">
		</div>
		<div class="mui-button-row">
			<a class="mui-btn mui-btn-primary submit">搜索</a> 
			<a class="mui-btn" id="csv" style="background-color: #ff3e00; border: 1px solid #ff3e00;">导出数据</a>
		</div>
	</form>

	<!-- <div id="leg_table"></div> -->
	</br>
	<!--下拉刷新容器-->
    <div id="pullrefresh"></div>
    <shiro:hasPermission name="compBill:refund">
		<span class="refund"></span>
	</shiro:hasPermission>
	<script type="text/javascript">
        	mui('#offCanvasContentScroll').scroll().scrollTo(0,0);
        	$(".mui-title").html("公司账单");
        	
        	var page = 1;
        	var pageData=[];
			var selectFlag = false;
			var count;
        	//接收数据
			/* var stateList = $.legTable({
				limit: 10,			//默认10
				page:1,				//默认1
				id:"#leg_table",	//绑定id
				url:"/compBill/getCompBillList",
				cols:[
					{field: 'source', title:'平台',templet: function(item){
		        		if(item.source =="2"||item.source=="3"){
		        			return '<span style="color:green;">微信</span>' 
		        		}else if(item.source =="4"||item.source=="5"){
		        			return  '<span style="color:#39a2ec;">支付宝</span>' 
		        		}
		        	}},
					//{field: 'openId', title:'付款 人'}, 
		            {field: 'caseNo', title: '储物柜'},
		            {field: 'caseNoBuy', title: '位置(储物柜)',templet: function(d){
		                var str="";
		                if(isNotNull(d.place)||isNotNull(d.caseNoBuy)){
		                    var str="";
		                    var caseNoBuy="";
		                    if(isNotNull(d.caseNoBuy)){
		                        str="号柜";
		                        caseNoBuy=d.caseNoBuy;
		                    }
		                    return  d.place +'<span style="color:#FF5722;margin-left:6px">'+ caseNoBuy +'</span>'+str
		                }else{
		                    return  d.caseNo
		                }
		            }},
		            {field: 'payAmount', title: '收款金额'},
		            {field: 'payTime', title: '收款时间'},
		            {field: 'compName', title: '公司名称'}
		        ]
			}); */
			
			//时间
			var btns = $('.btn');
			var begin = "",end = "",compId="";
			btns.each(function(i, btn) {
				btn.addEventListener('tap', function() {
					var _self = this;
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						_self.picker = new mui.DtPicker(options);
						_self.picker.show(function(rs) {
							if(id == "begin"){
								begin = rs.text;
							}else if(id == "end"){
								end = rs.text;
							}
							$("#"+id).val(rs.text);
							_self.picker.dispose();
							_self.picker = null;
						});
					
				}, false);
			});
           	
			/* $(".submit").on("touchstart",function(){
           		compId = $("#offCanvasContentScroll .mui-scroll select").find('option:selected').val();
				 $.legTable({
			        	where:{
			        		startTime:begin,
			        		endTime:end,
			        		compId:compId
		        		}
		        	});
			}) */
			$(".submit").on("touchstart",function(){
           		compId = $("#offCanvasContentScroll .mui-scroll select").find('option:selected').val();
           		selectFlag = true;
           		page = 1;
				getInfo();
			})
			$("#csv").on("touchstart",function(){
				var startTime = "";
				var endTime = "";
				isNotNull(begin)?startTime = "&startTime="+begin:1+1;
				isNotNull(end)?endTime = "&endTime="+end:1+1;
				$.get("/compBill/getCompBillList?page=1&limit="+count+"&excel=1"+startTime+endTime,function(res){
					window.location.href = "/compBill/excel";
				})
			})
			
			
			/* $("#csv").on("touchstart",function(){
				$.get("/compBill/getCompBillList?page=1&limit="+count+"&excel=1",function(res){
					window.location.href = "/compBill/excel";
				})
			}) */
		
			 $("#pullrefresh").on("touchstart", ".caseBoxRecord .isRefund", function(e){
				 var currentData = pageData[e.currentTarget.parentNode.parentNode.parentNode.parentNode.id]
				 var dom = '<ul><li>平台:&nbsp;'+platformFun(currentData)+'</li>'
			            +'<li>储物柜:&nbsp;'+boxPlaceFun(currentData)+'</li>'
			            +'<li>收款金额:&nbsp;'+currentData.payAmount+'</li>'
			            +'<li>收款时间:&nbsp;'+currentData.payTime+'</li>'
			            +'<li>公司名称:&nbsp;'+currentData.compName+'</li></ul>';
				 mui.confirm(dom,"确认退款?",["取消","确认"],function(e){
					 if(e.index==1){
						 inputRefundPassword(currentData.id);
					 }
				 })
				 $('.mui-popup-text').css('text-align','left')
			 }); 
			
			function inputRefundPassword(recordId){
				 var password='';
				 mui.prompt('','','退款密码验证',['取消','确认'],function(e){
					 if(e.index==1){
						 if(isNotNull(password)){
			    	        	$.ajax({
			    	        		url:"/compBill/refund",
			    	    			type:"post",
			    	    			dataType: 'json',
			    	    			data:{"recordId":recordId,"password":password},
			    	    			success:function(res){
			    	    				mui.alert(res.message,'温馨提示','确认',function(f){})
			    	    				if(res.success){
			    	    					 setTimeout(function(){location.reload()},200);
			    	    				}
			    	    			}
			    	    		});
	    	        	}else{
	        	        	mui.toast("密码不能为空");
	    	        	}
					 }
				 })
				 
				 $(".mui-popup-input input").attr("placeholder","输入登录密码");
				 $(".mui-popup-input input").keydown(function(evt){
				  	if (evt.keyCode.toString() == "8" || evt.keyCode.toString() == "46" ){
				        evt.delegateTarget.value = '';
						password = '';
						return;
		    		}
		    	});
		    	$(".mui-popup-input input").on('input',function(evt){
		    		var value = evt.delegateTarget.value;
		    	    password+=value.charAt(value.length-1);
		    	    evt.delegateTarget.value = value.replace(value.charAt(value.length-1),'*');
		    	});
			}
			
			 //平台
		    function platformFun(item){
				if(item.source =="2"||item.source=="3"){
					return '<span style="color:green;">微信</span>' 
				}else if(item.source =="4"||item.source=="5"){
					return  '<span style="color:#39a2ec;">支付宝</span>' 
				}
		    }
		    //储物柜位置
		   function boxPlaceFun(d){
		        var str="";
		        if(isNotNull(d.place)||isNotNull(d.caseNoBuy)){
		            var str="";
		            var caseNoBuy="";
		            if(isNotNull(d.caseNoBuy)){
		                str="号柜";
		                caseNoBuy=d.caseNoBuy;
		            }
		            return  d.place +'<span style="color:#FF5722;margin-left:6px">'+ caseNoBuy +'</span>'+str
		        }else{
		            return  d.caseNo
		        }
		    }
			//空字符串校验
		    function isNotNull(obj){
			    var result = true;
		    	if(obj instanceof Function || obj instanceof Array){
		    		 return result;
		    	}
			    switch (obj) {
			        case undefined:
			        case null:
			            result = false;
			            break;
			    }
			    if(result){
				    if(obj.replace(/\s+/g,"") == ""){//空字符串校验
				            result = false;
			    	}
			    }
			    return result;
			}
			
			var config = {
					data:[],
					cols:[{field: 'source', title:'',templet: function(item){//平台
						var isRefund = '';
						if(item.isRefund == 1){
							isRefund = ' (已退款)';
		            	}
		        		if(item.source =="2"||item.source=="3"){
		        			return '<span style="color:green;">微信收款:'+item.payAmount+isRefund+'</span>' 
		        		}else if(item.source =="4"||item.source=="5"){
		        			return  '<span style="color:#39a2ec;">支付宝收款:'+item.payAmount+isRefund+'</span>' 
		        		}
		        	}},
		            {field: 'caseNo', title: '对应储物柜:',templet: function(d){
		                var str="";
		                if(isNotNull(d.place)||isNotNull(d.caseNoBuy)){
		                    var str="";
		                    var caseNoBuy="";
		                    if(isNotNull(d.caseNoBuy)){
		                        str="号柜";
		                        caseNoBuy=d.caseNoBuy;
		                    }
		                    return  d.place +'<span style="color:#FF5722;margin-left:6px">'+ caseNoBuy +'</span>'+str
		                }else{
		                    return  d.caseNo
		                }
		            }},
		            {field: 'payAmount', title: ''},//收款金额
		            {field: 'payTime', title: ''},//收款时间
		            {field: 'compName', title: '公司名称:'},
		            {title: '', align: "center", templet: function(d){
		            	if(d.isRefund == 1){ return ''; }
		            	return '<a id = "'+d.id+'" class="mui-btn mui-btn-primary isRefund" lay-event="refund">退款</a>';
		            }}],
		    		runner:function(flag){
		    			var data = this.data;
		    			var cols = this.cols;
		    			if(flag){
							$("#pullrefresh").empty();
		    			}
			    		$.each(data,function(i,item1){
			    			var refundDom = ''
			    			if($(".refund").length > 0){refundDom ='<font style="float:right">operation</font>';}
			    			var dom = '<div id='+((page-1)*10+i)+' class="caseBoxRecord"><ul class="mui-table-view">'+
							    			'<li><h4>payTime</h4></li>'+
							    			'<li><font>compName</font></li>'+
							    			'<li><font>source</font></li>'+
							    			'<li><font>caseNo</font>'+refundDom+'</li>'+
							    		'</ul></div>';
							for (var j = 0; j < cols.length; j++) {
								var item2 = cols[j];
								var value;
								if(isNotNull(item2.templet)){
									if(item2.templet instanceof Function){
										value = item2.templet(item1);
									}else{
										value = $("#"+item2.templet.replace("#",""))[0].innerHTML;
									}
								}else{
									value = item1[item2.field];
								}
								value = item2.title+value;
								if(isNotNull(refundDom) && j == (cols.length-1)){
									dom = dom.replace("operation",value);
								}else{
									dom = dom.replace(item2.field,value);
								}
							};
			    			$("#pullrefresh").append(dom);
			    			pageData.push(item1);
						});
		    	}};
				
				var listenScreenFlag = true;
				var maxScrollYFlag = true;
				var lastScrollVla;
				var scroll = mui('.mui-inner-wrap .mui-scroll-wrapper').scroll(); 
			    document.querySelector('.mui-inner-wrap .mui-scroll-wrapper' ).addEventListener('scroll', function (e){
			    	 if(scroll.y<-50 && listenScreenFlag){
			    		$(".upTop").show();
			    		listenScreenFlag = false;
			    		
			    	}else if(scroll.y >= -50 && !listenScreenFlag){
			    		$(".upTop").hide();
			    		listenScreenFlag = true;
			    	} 
			    	 
			    	if(scroll.y < scroll.maxScrollY && $(".loading").length==0){
			    		$("#pullrefresh").append('<div class="loading">&nbsp;</div>');
			    	}
			    	if((scroll.y+30) < scroll.maxScrollY && maxScrollYFlag){
			    		maxScrollYFlag = false;
			    		$(".loading").text('正在加载...');
			    		setTimeout(function(){
			    			page++;
			    			getInfo();
			    		},1000)
		    		}
		    	})
			    
			    function getInfo(){
			    	var url = '/compBill/getCompBillList?page='+page;
			    	isNotNull(begin)?url=url+"&startTime="+begin:1+1;
			    	isNotNull(end)?url=url+"&endTime="+end:1+1;
			    	isNotNull(compId)?url=url+"&compId="+compId:1+1;
			    	//console.log("begin:"+begin+"  end:"+end+"  compId:"+compId)
		         	$.ajax({ 
			    		url:url, 
			    		type:'get',
			    		dataType:"json",
			    		timeout:10000,
			    		data:{},
			    		success:function(res){
			    			count = res.count
			    			$(".loading").remove();
			    			if(res.data.length==0){
			    				$("#pullrefresh").append('<div class="loading">————我也是有底线的————</div>');
			    			}else{
				    			maxScrollYFlag=true;
			    			}
			    			config.data=res.data;
							config.runner(selectFlag);
							selectFlag = false;
			               },
			               error:function(data){
			     	    		console.log("error")
		 	    	}});
		        }
		        getInfo();
	
		</script>
</body>

</html>